import React, { useEffect, useRef, useState } from "react"
import GpContainer from "@/components/GpContainer"
import styles from "./index.module.scss"
import { View, Swiper, SwiperItem, Video, Image, ScrollView, ITouchEvent } from "@tarojs/components"
import { NAVIGATION_BASE_LAYOUT, useSetState } from "@/utils/hooks"
import Taro, { useReady, useRouter, useShareAppMessage, eventCenter, nextTick } from "@tarojs/taro"
import Icon from "@/components/GpFontIcon"
import { useCustomPlayState, useTimedown } from "./hooks"
import GpShareButton from "@/components/GpShareButton"
import clsx from "clsx"
import {
  commentNote,
  concernPerson,
  getNoteComments,
  GetNoteDetail,
  noteLikeSwitch,
  reportComment,
  switchNoteCollect
} from "@/apis/yikao-community"
import { requestIsFullfilled } from "@/utils/request"
import { authActionHandler, handleBlockNavigation } from "@/utils/app"
import { pageMapperCommunity } from "@/constants/pageMap"
import { navigation } from "@/utils/router"
import { Backdrop, Popup } from "@taroify/core"
import GpComment from "../components/GpComment"
import GpEmpty from "@/components/GpEmpty"
import GpNavbar from "@/components/GpNavbar"
import GpFlowModule from "../components/GpFlowModule"
import GpCommentSender from "../components/GpCommentSender"
import { notePatchStack } from "@/constants/note"
import { getWindowInfo } from "@/utils/core"

interface INoteComment extends IApiRelative.IGetNoteComments.IGetNoteCommentItem {
  [key: string]: any
}
type IParams = {
  /** 笔记id */
  id: string
}
type IState = {
  detail: IApiRelative.IGetNoteDetail.INoteDetail
  /** 笔记评论列表 */
  noteComments: INoteComment[]
  /** 顶级评论是否有更多
   * @default true
   */
  topNoteHasMore: boolean
  /** 顶级评论当前页码
   * @default 1
   */
  topNoteCurrent: number
  /** 评论数 */
  commentCount: number
  /** 是否显示描述展开收起 */
  showExpand: boolean
  /** 是否折叠描述 */
  collapsed: boolean
  /** 是否显示引流模块 */
  showFlowModule: boolean
  /** 关闭引流模块弹窗后显示右上角引流模块 */
  showFixedFlowModule: boolean
  /** 是否显示评论区 */
  showCommentPopup: boolean
  /** 视频时长是否没超过30秒 */
  videoNotExtend: boolean
  /** swiper 滚动方向
   * @description 如果内容过多 但是想要内容可滚动 与swiper滚动冲突 导致内容滚动不了 所以采取 高度大于一定值时横向滚动 这样超出内容就可滚动不会与swiper滚动冲突了
   * @see 【【艺考小程序】内容较多的视频笔记无法显示全】https://www.tapd.cn/42905076/bugtrace/bugs/view?bug_id=1142905076001013850
   * @default true
   */
  vertical: boolean
}
/**
 * @page 视频笔记详情
 * @link http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400
 */
export default function VideoNoteDetail() {
  const videoExtend = 30
  const [layout, setLayout] = useState<NavigationBaseLayout>(NAVIGATION_BASE_LAYOUT)
  const router = useRouter<IParams>()
  const commentSenderRef = useRef<ICommentSendernRef>(null)
  const [state, setState, stateRef] = useSetState<IState>(
    {
      detail: {
        files: [],
        tagValues: [],
        tags: [],
        modules: [],
        recommendNotes: [],
        contentFragments: []
      } as any,
      noteComments: [],
      topNoteCurrent: 1,
      topNoteHasMore: true,
      commentCount: 0,
      showExpand: false,
      collapsed: false,
      showFlowModule: false,
      showFixedFlowModule: false,
      showCommentPopup: false,
      videoNotExtend: false,
      vertical: true
    },
    true
  )
  const videoCtx = useRef<Taro.VideoContext>()
  /** 引流模块是否已经弹出过 */
  const flowModuleToasted = useRef<boolean>(false)
  const {
    handleClickPlayBtn,
    handleEnded: _handleEnded,
    handlePause,
    handlePlay,
    showPlayBtn,
    videoPlaying
  } = useCustomPlayState(videoCtx)
  useTimedown(toastFlowModule, videoExtend, state.videoNotExtend)
  useShareAppMessage(() => {
    return {}
  })
  useEffect(() => {
    fetchDetail()
    fetchNoteComments()
  }, [])
  useReady(() => {
    eventCenter.once("noteDetailReady", () => {
      nextTick(handleDescExpand)
    })
    videoCtx.current = Taro.createVideoContext("noteVideo")
  })
  function handleLoadedMetaData(ev: { detail: { duration: number } }) {
    const { duration } = ev.detail
    setState({ videoNotExtend: duration < videoExtend })
  }
  function handleEnded() {
    _handleEnded()
    if (state.videoNotExtend) {
      toastFlowModule()
    }
  }
  function toastFlowModule() {
    if (!flowModuleToasted.current) {
      setState({ showFlowModule: true })
    }
  }
  function fetchDetail() {
    Taro.showLoading({ title: "加载中" })
    GetNoteDetail({ id: Number(router.params.id) })
      .then(res => {
        if (requestIsFullfilled(res)) {
          const detail = res.data.data
          // 处理笔记文本内容 根据换行符进行切割成段落
          if (detail.content) {
            detail.contentFragments = detail.content.split(/\r?\n/)
          } else {
            detail.contentFragments = []
          }
          setState({ detail })
          eventCenter.trigger("noteDetailReady")
        }
      })
      .finally(() => {
        Taro.hideLoading()
      })
  }
  function actionNoteComments(current: number, pageSize: number, parentId?: number) {
    return getNoteComments(
      {
        id: router.params.id,
        parentId
      },
      {
        pagination: {
          current,
          pageSize
        },
        search: {},
        sort: {
          predicate: "",
          reverse: false
        }
      }
    )
  }
  /** 添加前端必要字段 */
  function patchFields(
    comment: IApiRelative.IGetNoteComments.IGetNoteCommentItem,
    childNoteHasMore = true
  ) {
    if (typeof comment.childNoteCurrent === "undefined") {
      comment.childNoteCurrent = 0
    }
    if (typeof comment.childNoteHasMore === "undefined") {
      comment.childNoteHasMore = childNoteHasMore
    }
    if (typeof comment.children === "undefined") {
      comment.children = []
    }
  }
  /** 获取评论列表
   * @param {number} [parentId=0] 父级评论id
   */
  function fetchNoteComments(parentId?: number) {
    if (!parentId) {
      actionNoteComments(stateRef.current!.topNoteCurrent, 10).then(res => {
        if (requestIsFullfilled(res)) {
          const { list, pagination } = res.data.data
          list.forEach(l => {
            patchFields(l, l.childrenCount > 0)
          })
          setState({
            // @ts-ignore
            noteComments:
              pagination.current === 1 ? list : stateRef.current!.noteComments.concat(list),
            topNoteHasMore: pagination.current < pagination.pageCount,
            commentCount: pagination.total
          })
        }
      })
    } else {
      const _noteComments = stateRef.current!.noteComments.concat()
      const parent = _noteComments.find(item => item.id === parentId)
      if (parent) {
        patchFields(parent)
        parent.childNoteCurrent += 1
        actionNoteComments(parent.childNoteCurrent, 5, parentId).then(res => {
          if (requestIsFullfilled(res)) {
            const { list, pagination } = res.data.data
            const _children = pagination.current === 1 ? list : parent.children.concat(list)
            parent.children = _children
            parent.childNoteHasMore = pagination.current < pagination.pageCount
            setState({
              // @ts-ignore
              noteComments: _noteComments
            })
          }
        })
      }
    }
  }
  function handleConcern() {
    authActionHandler(handleConcernAction, {
      mobile: true,
      avatarAndNickname: false
    })
  }
  function handleConcernAction() {
    if (!state.detail) return
    concernPerson({
      miniVisitorId: state.detail.miniVisitorId
    }).then(res => {
      if (requestIsFullfilled(res)) {
        const isCancel = state.detail.isSelfFollowing
        Taro.showToast({
          title: isCancel ? "已取消关注" : "关注成功",
          icon: "none"
        })
        const _detail = { ...state.detail }
        _detail.isSelfFollowing = !_detail.isSelfFollowing
        setState({
          detail: _detail
        })
      }
    })
  }
  /** 处理笔记点赞/收藏 */
  function handleOpinionAction(actionType: "like" | "collect") {
    if (actionType === "like") {
      noteLikeSwitch({
        id: router.params.id
      }).then(res => {
        if (requestIsFullfilled(res)) {
          const { isLike, likeCount } = res.data.data
          Taro.showToast({
            title: isLike ? "点赞成功" : "已取消点赞",
            icon: "none"
          })
          const _detail = { ...state.detail }
          _detail.isSelfLike = isLike
          _detail.likeCount = likeCount
          setState({ detail: _detail })
          notePatchStack.push({
            id: Number(router.params.id),
            isSelfLike: isLike,
            likeCount
          })
        }
      })
    } else {
      switchNoteCollect({
        id: router.params.id
      }).then(res => {
        if (requestIsFullfilled(res)) {
          Taro.showToast({
            title: state.detail.isSelfFavorite ? "已取消收藏" : "收藏成功",
            icon: "none"
          })
          const _detail = { ...state.detail }
          _detail.isSelfFavorite = !_detail.isSelfFavorite
          _detail.favoriteCount = state.detail.isSelfFavorite
            ? _detail.favoriteCount - 1
            : _detail.favoriteCount + 1
          setState({ detail: _detail })
        }
      })
    }
  }
  /** 处理点评点赞成功回调 */
  function handleCommentLike(
    commentId: number,
    meta: IApiRelative.ISwitchCommentLike.IResData,
    parentId?: number
  ) {
    const _noteComments = state.noteComments.concat()
    if (!parentId) {
      // 顶级点评
      const finder = _noteComments.find(l => l.id === commentId)
      if (finder) {
        finder.isSelfLike = meta.isLike
        finder.likeCount = meta.likeCount
        setState({ noteComments: _noteComments })
      }
    } else {
      // 二级点评
      const finder = _noteComments.find(l => l.id === parentId)
      if (finder && finder.children) {
        const finder2 = finder.children.find(l => l.id === commentId)
        if (finder2) {
          finder2.isSelfLike = meta.isLike
          finder2.likeCount = meta.likeCount
          setState({ noteComments: _noteComments })
        }
      }
    }
  }
  /** 处理点评展开更多 */
  function expandCommentChildren(parentId?: number) {
    if (!parentId) return
    fetchNoteComments(parentId)
  }
  /** 处理点评删除成功回调 */
  function handleCommentRemove(commentId: number, parentId?: number) {
    const _noteComments = state.noteComments.concat()
    if (!parentId) {
      // 顶级点评
      const index = _noteComments.findIndex(l => l.id === commentId)
      if (~index) {
        _noteComments.splice(index, 1)
        setState({ noteComments: _noteComments, commentCount: stateRef.current!.commentCount - 1 })
      }
    } else {
      // 二级点评
      const finder = _noteComments.find(l => l.id === parentId)
      if (finder && finder.children) {
        const index = finder.children.findIndex(l => l.id === commentId)
        if (~index) {
          finder.children.splice(index, 1)
          finder.childrenCount -= 1
          // ?删除二级评论是否会影响其他对该评论的子评论
          setState({ noteComments: _noteComments })
        }
      }
    }
  }
  function handleReply(commentId: number, parentId?: number) {
    if (commentSenderRef.current) {
      commentSenderRef.current.triggerComment(commentId, false, parentId)
    }
  }
  function handleReport(commentId: number, _parentId?: number) {
    reportComment(
      {
        id: commentId
      },
      {}
    ).then(res => {
      if (requestIsFullfilled(res)) {
        Taro.showToast({
          title: "举报成功",
          icon: "none"
        })
      }
    })
  }
  /** 顶级点评的action(如 点评笔记, 点评资讯) */
  function topCommentAction(data: Omit<IApiRelative.IReplyComment.IParams, "parentId">) {
    return commentNote(
      {
        id: router.params.id
      },
      data
    )
  }
  function onCommentSuccess(
    parentId: number,
    insertedComment: IApiRelative.IGetNoteComments.IGetNoteCommentItem,
    ownParentId: number
  ) {
    if (!insertedComment) {
      console.info("评论成功后接口没返回该新增评论项！")
      return
    }
    patchFields(insertedComment, insertedComment.childrenCount > 0)
    const _noteComments = state.noteComments.concat()
    if (!parentId) {
      _noteComments.unshift(insertedComment)
      setState({ noteComments: _noteComments, commentCount: stateRef.current!.commentCount + 1 })
    } else {
      const finder = _noteComments.find(l => l.id === ownParentId)
      if (finder && finder.children) {
        finder.children.unshift(insertedComment)
        finder.childrenCount += 1
        setState({ noteComments: _noteComments })
      }
    }
  }
  function triggerTopComment() {
    if (commentSenderRef.current) {
      commentSenderRef.current.handleClickTopComment()
    }
  }
  function handleLoadMoreComments() {
    if (stateRef.current!.topNoteHasMore) {
      setState({ topNoteCurrent: stateRef.current!.topNoteCurrent + 1 })
      fetchNoteComments()
    }
  }
  function handleDescExpand() {
    const query = Taro.createSelectorQuery()
    query
      .select("#videoNoteDesc")
      .fields({
        size: true,
        computedStyle: ["lineHeight"]
      })
      .exec(res => {
        const { height, lineHeight } = res[0]
        const lines = Math.ceil(height / parseInt(lineHeight))
        const { height: winHeight } = getWindowInfo()
        // expand 最大高度为49vh, 所以这里同步是0.49; 当改了该值, 对应样式中也需要同步修改!
        const threshold = Math.floor(winHeight * 0.49)
        const vertical = height <= threshold
        setState({ showExpand: lines > 2, collapsed: lines > 2, vertical })
      })
  }
  function handleSwitchVideo() {
    if (videoCtx.current) {
      if (videoPlaying.current) {
        videoCtx.current.pause()
      } else {
        videoCtx.current.play()
      }
    }
  }
  function jumpToPersonal() {
    navigation(pageMapperCommunity.PersonalPage, { id: state.detail.miniVisitorId })
  }
  function renderNavigation() {
    return (
      <GpNavbar
        navigationBarPlaceholder={false}
        navigationBarBackgroundColor="transparent"
        arrowLeftProps={{
          color: "#FFFFFF"
        }}
        onLayout={setLayout}
      />
    )
  }
  function renderExpand() {
    if (!state.showExpand) return null
    return (
      <View
        className={styles.expandText}
        onClick={() =>
          setState({
            collapsed: !stateRef.current!.collapsed
          })
        }
      >
        {state.collapsed ? "展开全文" : "收起"}
      </View>
    )
  }
  /* 笔记关联的相关话题 */
  function renderRelatedTopics() {
    if (
      !state.detail ||
      !state.detail.relationDiscussions ||
      state.detail.relationDiscussions.length === 0
    )
      return null
    const wordItem = state.detail.relationDiscussions[0]
    return (
      <View
        className={styles.relatedWord}
        onClick={() => navigation(pageMapperCommunity.WordDetail, { id: wordItem.id })}
      >
        <Icon icon="icon-huati3" color="#ffffff" size={28} className="flex-none mr-8px" />
        <View className="flex-1 w-0 truncate">{wordItem.title}</View>
        <Icon icon="icon-youjiantou" color="#999999" size={28} className="ml-auto flex-none" />
      </View>
    )
  }
  /** 底部操作 */
  function renderBottomAction() {
    return (
      <View className={styles.bottomAction}>
        <View className={styles.commentBtn} onClick={triggerTopComment}>
          <Icon icon="icon-huifu" color="#999999" size={36} />
          发表你的看法
        </View>
        <View className="flex flex-row items-center justify-between gap-24px ml-56px flex-none">
          <View className={styles.actionItem} onClick={() => setState({ showCommentPopup: true })}>
            <Icon icon="icon-huatipinglun1" color="#999999" size={36} />
            {state.commentCount}
          </View>
          <View className={styles.actionItem} onClick={() => handleOpinionAction("like")}>
            {state.detail.isSelfLike ? (
              <Icon icon="icon-dianzan-yidian" color="#FA3F29" size={48} />
            ) : (
              <Icon icon="icon-dianzan" color="#999999" size={48} />
            )}
            {state.detail.likeCount}
          </View>
          <View className={styles.actionItem} onClick={() => handleOpinionAction("collect")}>
            {/* <Star size={22} color="#FA3F29" /> */}
            {state.detail.isSelfFavorite ? (
              <Icon icon="icon-shoucang-yixuanzhong" color="#FF8615" size={48} />
            ) : (
              <Icon icon="icon-shoucang" color="#999999" size={48} />
            )}
            {state.detail.favoriteCount}
          </View>
          <View className={styles.actionItem}>
            <GpShareButton iconSize={48} shareText={null} icon="icon-fenxiang2" />
          </View>
        </View>
      </View>
    )
  }
  function renderRelatedTags() {
    if (state.detail.tagValues.length === 0) return
    return state.detail.tagValues.map(l => (
      <View
        className="inline text-white pr-8px"
        key={l.value}
        onClick={() => navigation(pageMapperCommunity.NoteTag, { id: l.value })}
      >
        #{l.label}
      </View>
    ))
  }
  /* 笔记发布者信息 */
  function renderNoteDetail() {
    const frgCount = state.detail.contentFragments.length
    let hasRelatedTopics = true
    if (
      !state.detail ||
      !state.detail.relationDiscussions ||
      state.detail.relationDiscussions.length === 0
    ) {
      hasRelatedTopics = false
    }
    return (
      <View
        className={styles.noteDetail}
        onClick={ev => {
          ev.preventDefault()
          ev.stopPropagation()
        }}
      >
        <View className={styles.noteDetailMask}>
          <View className={styles.notePub}>
            <Image
              onClick={jumpToPersonal}
              src={state.detail.createdByHead || process.env.__DEF_AVATAR__}
              className="w-56px h-56px box-border rounded-full object-cover mr-8px"
            />
            <View className="text-32px font-500 text-white mr-16px" onClick={jumpToPersonal}>
              {state.detail.createdByName}
            </View>
            <View
              className={clsx(styles.concernBtn, {
                [styles.concerned]: state.detail.isSelfFollowing
              })}
              onClick={handleConcern}
            >
              {state.detail.isSelfFollowing ? "已关注" : "关注"}
            </View>
          </View>
          {/* 笔记描述 */}
          <View
            className={clsx("px-32px box-border mt-28px", hasRelatedTopics ? "mb-24px" : "mb-32px")}
          >
            <View
              className={clsx(styles.noteDesc, state.collapsed ? styles.collapsed : styles.expand)}
              id="videoNoteDesc"
            >
              {frgCount > 0
                ? state.detail.contentFragments.map((l, index) => (
                    <View className="box-border" key={l}>
                      {l}
                      {index === frgCount - 1 ? renderRelatedTags() : null}
                    </View>
                  ))
                : renderRelatedTags()}
            </View>
            {renderExpand()}
          </View>
          {/* 关联话题 */}
          {renderRelatedTopics()}
          {/* IGNORE THIS BUT DO NOT REMOVE THIS!!! */}
          <View className="h-1px w-full"></View>
        </View>
        {/* 底部操作 */}
        {renderBottomAction()}
      </View>
    )
  }
  function renderVideoNote() {
    return (
      <Swiper className={styles.swiper} vertical={state.vertical} indicatorDots={false}>
        <SwiperItem className={styles.swiperItem}>
          <View className={styles.videoNote}>
            <Video
              className={styles.video}
              src={state.detail.files[0]?.fileUrl}
              poster={state.detail.cover}
              controls
              showCenterPlayBtn={false}
              showBottomProgress
              showFullscreenBtn={false}
              showPlayBtn={false}
              enableAutoRotation={false}
              enablePlayGesture={false}
              autoplay
              muted={false}
              loop={false}
              id="noteVideo"
              objectFit="contain"
              onPlay={handlePlay}
              onPause={handlePause}
              onEnded={handleEnded}
              onLoadedMetaData={handleLoadedMetaData}
              onClick={handleSwitchVideo}
            >
              {/* 自定义播放按钮 */}
              {showPlayBtn && (
                <Image
                  src="/images/yikao-community/video-play.png"
                  className={styles.videoPlay}
                  onClick={handleClickPlayBtn}
                />
              )}
              {/* 笔记发布者信息 */}
              {renderNoteDetail()}
              {/* 引流模块右上角 */}
              {renderFixedFlowModule()}
            </Video>
          </View>
        </SwiperItem>
      </Swiper>
    )
  }
  function handleFlowModuleNavigation(ev: ITouchEvent) {
    ev.preventDefault()
    ev.stopPropagation()
    const [flowModule] = state.detail.modules
    handleBlockNavigation({
      jumpPageId: flowModule.jumpPageId,
      jumpPageType: flowModule.jumpPageType,
      jumpType: flowModule.jumpType,
      jumpUrl: flowModule.jumpUrl
    })
  }
  /* 引流模块右上角 */
  function renderFixedFlowModule() {
    if (!state.showFixedFlowModule || !state.detail.modules || state.detail.modules.length === 0) {
      return null
    }
    const [flowModule] = state.detail.modules
    const len = flowModule.name.length
    const title = len <= 7 ? flowModule.name : flowModule.name.slice(0, 7).concat("...")
    // @ts-ignore
    return (
      <View
        className={styles.fixedFlowModule}
        style={{ "--navtop": layout.statusBarHeight + layout.navigationHeight + "px" }}
        onClick={handleFlowModuleNavigation}
      >
        {title}
        <Icon icon="icon-youjiantou" color="#999999" size={28} className="flex-none" />
      </View>
    )
  }
  function renderCommentPopup() {
    return (
      <Popup
        open={state.showCommentPopup}
        catchMove
        rounded
        placement="bottom"
        className={styles.commentPopup}
        onClose={() => setState({ showCommentPopup: false })}
      >
        <Popup.Close />
        <View className={styles.commentPannel}>
          <View className={styles.popupTitle}>共{state.commentCount}条评论</View>
          {renderComments()}
          <View className={styles.popupBottomArea}>
            <View className={styles.popupBottom} onClick={triggerTopComment}>
              发条评论分享一下你的想法吧!
            </View>
          </View>
        </View>
      </Popup>
    )
  }
  function renderComments() {
    if (state.noteComments.length === 0) {
      return (
        <View className={styles.mainList}>
          <GpEmpty />
        </View>
      )
    }
    return (
      <ScrollView
        className={clsx(styles.mainList, styles.commentList)}
        scrollY
        onScrollToLower={handleLoadMoreComments}
      >
        {/* 顶级评论项 */}
        {state.noteComments.map(l => (
          <GpComment
            key={l.id}
            comment={l}
            onLike={handleCommentLike}
            onExpandChildren={expandCommentChildren}
            onRemove={handleCommentRemove}
            onReply={handleReply}
            onReport={handleReport}
            className={styles.comment}
          />
        ))}
      </ScrollView>
    )
  }
  /**引流模块
   * - ~~在视频播放第30秒跳出~~
   * - 若视频超过30秒的，停留30秒跳出，若视频不足30秒，结束时跳出
   */
  function renderFlowModule() {
    if (!state.detail.modules || state.detail.modules.length === 0) {
      return null
    }
    const [flowModule] = state.detail.modules
    return (
      <Backdrop className={styles.flowModuleMask} open={state.showFlowModule} closeable={false}>
        <View className={styles.flowModule}>
          <View
            className={styles.flowModuleClose}
            onClick={() => {
              setState({ showFlowModule: false, showFixedFlowModule: true })
              flowModuleToasted.current = true
            }}
          >
            <Icon icon="icon-shanchu2" color="#333333" size={12} />
          </View>
          <GpFlowModule
            flowModule={{
              remark: flowModule.remark,
              description: flowModule.description,
              displayName: flowModule.displayName,
              id: flowModule.id,
              image: flowModule.cover,
              jumpPageId: flowModule.jumpPageId,
              jumpPageType: flowModule.jumpPageType,
              jumpType: flowModule.jumpType,
              jumpUrl: flowModule.jumpUrl,
              title: flowModule.name,
              isHide: flowModule.isHide
            }}
          />
        </View>
      </Backdrop>
    )
  }
  function renderCommentSender() {
    return (
      <GpCommentSender
        ref={commentSenderRef as any}
        topCommentAction={topCommentAction}
        onConfirm={onCommentSuccess}
      />
    )
  }
  return (
    <GpContainer
      className="min-h-screen"
      style={{
        backgroundColor: "rgba(0, 0, 0, 0.95)"
      }}
      shareConfig={{ title: state.detail.title }}
    >
      {renderNavigation()}
      {renderVideoNote()}
      {renderCommentPopup()}
      {renderFlowModule()}
      {renderCommentSender()}
    </GpContainer>
  )
}
